<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* CSS样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
        }

        #userTable {
            width: 100%;
            border-collapse: collapse;
            margin: 15px auto;
        }

        #userTable thead {
            background-color: #4CAF50;
            color: white;
            text-align: left;
        }

        #userTable th,
        #userTable td {
            text-align: center;
            padding: 15px;
            border: 1px solid #ddd;
        }

        #userTable tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        #userTable tbody tr:hover {
            background-color: #ddd;
        }

        #userTable tbody td {
            font-size: 14px;
        }
        .upTate{
            position: absolute;
            top:80px;
            left: 600px;
            width: 250px;
            height: 120px;
            background-color: aliceblue;
            text-align: center;
            display: none;
        }
        button{
            width: 70px;
            height: 30px;
            position: relative;
            top: 5px;
            background-color: aqua;
            border-radius: 15px;
        }
        .insertUs{
            position: absolute;
            top:80px;
            left: 600px;
            width: 500px;
            height: 120px;
            background-color: aliceblue;
            text-align: center;
            display: none;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<button onclick="addBtn()">添加</button>
<table id="userTable">
    <thead>
    <tr>
        <th>id</th>
        <th>姓名</th>
        <th>密码</th>
        <th>金钱</th>
        <th>头像</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="shuJu">
    </tbody>
</table>
<div class="upTate">
    请输入要更改的密码：<input type="text" id="updatePass"><br>
    请输入要更改的余额：<input type="text" id="updateBalance"><br>
    <button onclick="Tijiao()" id="tijaio">提交</button>
</div>

<div class="insertUs">
    请输入要新增的用户名：<input type="text" id="insertUserName"><br>
    请输入新增用户的密码：<input type="text" id="insertPass"><br>
    请输入新增用户的余额：<input type="text" id="insertBalance"><br>
    <button id="insertButton">确认新增</button>
    <button id="closeNew">取消</button>
</div>

<script type="text/JavaScript" lanage="javascript">
    $(document).ready(function(){
        loadData()
    })
    function loadData() {
        $('#shuJu').html(" "); // 在重新加载数据前清空tbody
        $.ajax({
            type:"get",
            url:"userServlet?choice=select", // 更改为正确的URL
            dataType:"json",
            success:function (data) {
                for(var i = 0;i <data.length; i++){
                    var decodedImageUrl = decodeURIComponent(data[i].img);
                    var str = "<tr>"
                    str+="<td>"+data[i].id+"</td>"
                    str+="<td>"+data[i].name+"</td>"
                    str+="<td>"+data[i].password+"</td>"
                    str+="<td>"+data[i].balance+"</td>"
                    str+="<td><img src=' img/"+decodedImageUrl+"' width='50' height='50'></td>"
                    str+="<td><a href='#' onclick='updateAll("+data[i].id+")'>修改</a>     <a href='#' onclick='deleteAll("+data[i].id+")'>删除</a></td>"
                    str+="</tr>";
                    $("#shuJu").append(str);
                }
            },
            error:function (xhr, status, error) {
                console.log(error);
            },
        });
    }

    function deleteAll(id) {
        alert(id)
        $.ajax({
            type:"get",
            url:"userServlet?choice=delete&id="+id, // 更改为正确的URL
            dataType:"json",
            success:function(data){
                if(data.code == 200){
                    alert(data.msg)
                    window.location.reload();
                }else {
                    alert(data.msg)
                }
            },
        })
    }
    function updateAll(id) {
        alert(id)
        $('.upTate').show(1000);
        $("#tijaio").on("click",function(){
            OK(id);
        })
    }


    function OK(id) {
        let updatePass = $('#updatePass').val();
        let updateBalance = $('#updateBalance').val();
        if (!updatePass || !updateBalance) {
            alert('请确保密码和余额都已填写！');
            return; // 直接终止函数执行
        }
        $.ajax({
            type:"get",
            url:"userServlet?choice=updateUser&id="+id,
            dataType:"json",
            data:{
                updatePass:updatePass,
                updateBalance:updateBalance,
            },
            success:function (data) {
                if(data.code == 200){
                    alert(data.msg)
                    window.location.reload();
                    $('.upTate').hide(1000);
                }else {
                    alert(data.msg)
                }
            }
        })
    }
    function addBtn() {
        $(".insertUs").show(1000)
        $("#insertButton").on("click",function(){
            addUsers();
        })
    }

    function addUsers() {
        let insertUserName = $('#insertUserName').val();
        let insertPass = $('#insertPass').val();
        let insertBalance = $('#insertBalance').val();

        if (!insertUserName || !insertPass || !insertBalance) {
            alert('请确保用户名、密码和余额都已填写！');
            return; // 直接终止函数执行
        }
        $.ajax({
            type:"get",
            url:"userServlet?choice=insertUser",
            dataType:"json",
            data:{
                insertUserName:insertUserName,
                insertPass:insertPass,
                insertBalance:insertBalance
            },
            success:function (data) {
                if(data.code == 200){
                    alert(data.msg)
                    $(".insertUs").hide(1000);
                    window.location.reload();
                }else {
                    alert(data.msg)
                }
            }

        })
    }
    $('#closeNew').on("click",function (){
        $(".insertUs").hide(1000)
    })
</script>
</body>
</html>
